<template>
  <div>
    <h1>{{ msg }}</h1>
    <input type="text" v-model.number="msg" />
    <button @click="fn"></button>
    <input type="text" v-model.trim="msg" />
    <button @click="fn"></button>
    <input type="text" v-model.lazy="msg" />
    <!-- <button @click="fn"></button> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "",
    };
  },
  methods: {
    fn() {
      console.log(this.msg.length);
    },
  },
};
</script>

<style>
</style>